//################################
// 版权所有：中国农业银行软件开发中心
// 系统名称：移动办公应用-手机版
// 文件名称：navigationBar/index.js
// 创建时间：2016年11月22日
// 创建人员：朱勇
// 功能说明：标题栏公共组件
//################################
import React, {Component} from 'react';
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  Dimensions,
  InteractionManager
} from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';
const WINDOW_HEIGHT=Dimensions.get('window').height;
const WINDOW_WIDTH=Dimensions.get('window').width;
class NavigationBar extends Component {
    constructor(props){
        super(props);

        this.textColor=props.textColor?props.textColor:'white';
        this.leftButton=true;
        if(Object.prototype.toString.call(props.leftButton) === '[object Undefined]'){
            this.leftButton=true;
        }else{
            this.leftButton=props.leftButton?true:false;
        }

        this.backBtnText=this.props.backText?this.props.backText:'返回';
        this.fontSize=15;
        // if(this.backBtnText.length>3){
        //     if(this.backBtnText.length>9){
        //         this.backBtnText=this.backBtnText.substr(0,9)+'...';
        //     }
        //     this.fontSize=Math.floor(20-this.backBtnText.length*1.3);
        // }

        this.titleFontSize=18;
        this.titleText=this.props.title;
        if(this.titleText.length>9){
            if(this.titleText.length<15){
                this.titleFontSize=Math.floor(20-this.titleText.length*0.5);
            }else{
                if(this.titleText.length>45){
                    this.titleText=this.titleText.substr(0,45)+'...';
                }
                this.titleFontSize=13;
            }
        }
    }

    onBackPress(){
        // const {navigator}=this.props;
        // InteractionManager.runAfterInteractions(()=>{
        //     navigator.pop();
        // }); 
        this.props.onBackPress&&this.props.onBackPress();
    }
    render() {
        return (
            <View style={[styles.container,{backgroundColor:this.props.backgroundColor?this.props.backgroundColor:'rgba(0, 0, 0, 0.8)'}]}>
                <TouchableOpacity style={[styles.btnView,{marginLeft:10}]} onPress={()=>{this.leftButton?this.onBackPress():null}}>
                    <Ionicons name={'ios-arrow-back'} size={30} color={this.textColor} style={{opacity:this.leftButton?1:0}}/>
                    <Text style={[styles.btnText,{color:this.textColor},{opacity:this.leftButton?1:0},{fontSize:this.fontSize}]}>{this.backBtnText.length<8?this.backBtnText:'返回'}</Text>
                </TouchableOpacity>
                <View style={styles.titleView}>
                    <Text style={[styles.titleText,{color:this.textColor},{fontSize:this.titleFontSize}]}>{this.titleText}</Text>
                </View>
                <TouchableOpacity style={[styles.btnView,{marginRight:10}]} onPress={this.props.rightButton?this.props.onPress:null}>
                    <Text style={[styles.btnText,{color:this.textColor},{opacity:this.props.rightButton?1:0}]}>{this.props.rightButton?this.props.rightButton:'提交'}</Text>
                    <Ionicons name={'ios-arrow-back'} size={30} style={{opacity:0}}/>
                </TouchableOpacity>
            </View>
        );
    }
}
var styles = StyleSheet.create({
  container:{
    height:60,
    flexDirection:'row',
    alignItems:'center',
    justifyContent:'center',
    paddingTop:12
  },
  titleView:{
    flex:1,
    alignItems:'center',
    justifyContent:'center',
    marginLeft:10,
    marginRight:10
  },
  btnView:{
    // width:WINDOW_WIDTH*0.2,
    flexDirection:'row',
    alignItems:'center',
    justifyContent:'center',
    paddingLeft:6,
    paddingRight:5,
  },
  titleText:{
    marginLeft:5,
    flexWrap:'wrap',
  },
  btnText:{
    marginLeft:5,
    flexWrap:'nowrap',
  }
})
export default NavigationBar;